<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="DeviceStore.searchForm" :FormConfig />

    <!-- <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-select allowClear style="width:20%" placeholder="状态" v-model:value="DeviceStore.searchForm.state">
            <a-select-option value="在线">在线</a-select-option>
            <a-select-option value="离线">离线</a-select-option>
        </a-select>
        <a-input allowClear style="width:55%" v-model:value="DeviceStore.searchForm.deviceName" placeholder="设备名称"
            @search="DeviceStore.getDevice" />
        <a-button @click="DeviceStore.getDevice">
            <template #icon>
                <SearchOutlined />
            </template>
</a-button>
<a-button type="primary" @click="addFormRef.open = true">
    <template #icon>
                <PlusOutlined />
            </template>
</a-button>
<a-button @click="DeviceStore.exportAllData">
    <template #icon>
                <VerticalAlignBottomOutlined />
            </template>
</a-button>
</a-input-group> -->


    <Scroll :maxHeight="`${scroll.y + 150}px`">
        <a-spin class="mySpin" tip="正在加载..." :spinning="DeviceStore.showMore" v-if="DeviceStore.tableData.length > 0">
            <a-row :gutter="20">
                <a-col :key="item.id" :xxl="{ span: 6 }" :xl="{ span: 8 }" :lg="{ span: 12 }" :xs="{ span: 24 }"
                    v-for="item in DeviceStore.tableData">
                    <a-card v-Observer="ObserverLoadMore" class="deviceCard">
                        <div class="myTag" :style="{ backgroundColor: item.state == '在线' ? '#87d068' : '#f50' }">
                            {{ item.state }}
                        </div>
                        <div class="ItemBox">
                            <div class="title">
                                <p class="deviceName">{{ item.deviceName }}</p>
                                <a-space-compact>
                                    <Btn permission="setVideo"
                                        @click="() => { videoModal = true; DeviceStore.editForm = { ...item } }">
                                        <template #icon>
                                            <VideoCameraOutlined />
                                        </template>
                                    </Btn>
                                    <Btn permission="edit" @click="editFn(item)">
                                        <template #icon>
                                            <EditOutlined style="color:#87d068" />
                                        </template>
                                    </Btn>
                                    <a-popconfirm title="此操作不可逆，是否继续？" ok-text="确定" cancel-text="取消"
                                        @confirm="DeviceStore.delDevice(item.id)" @cancel="EventBus.emit('CancleInfo')">
                                        <Btn permission="delete">
                                            <template #icon>
                                                <DeleteOutlined style="color:#ff5500" />
                                            </template>
                                        </Btn>
                                    </a-popconfirm>
                                </a-space-compact>
                            </div>
                            <div class="imgBox">
                                <img class="deviceImg" src="@/assets/img/device.png" alt="">
                            </div>
                            <ul>
                                <li>
                                    <span>
                                        <BarcodeOutlined class="myIcon" />序列号：
                                    </span>
                                    <span>{{ item.serial }}</span>
                                </li>
                                <li>
                                    <span>
                                        <BarcodeOutlined class="myIcon" />SN：
                                    </span>
                                    <span>{{ item.board }}</span>
                                </li>
                                <li>
                                    <span>
                                        <TagsOutlined class="myIcon" />所属科室：
                                    </span>
                                    <span>{{ item.departmentName }}</span>
                                </li>
                                <li>
                                    <span>
                                        <EnvironmentOutlined class="myIcon" />安装位置：
                                    </span>
                                    <span>{{ item.area }}</span>
                                </li>
                                <li>
                                    <span>
                                        <UserOutlined class="myIcon" />维护人：
                                    </span>
                                    <span>{{ item.principal }}</span>
                                </li>
                                <li>
                                    <span>
                                        <MobileOutlined class="myIcon" />联系方式：
                                    </span>
                                    <span>{{ item.tell }}</span>
                                </li>
                                <li>
                                    <span>
                                        <NumberOutlined class="myIcon" />已使用：
                                    </span>
                                    <a-tag color="green">{{ item.tubeUse }}</a-tag>
                                </li>
                                <li>
                                    <span>
                                        <BranchesOutlined class="myIcon" />版本号：
                                    </span>
                                    <span>{{ item.versionId }}</span>
                                </li>
                                <li>
                                    <span>
                                        <FundOutlined class="myIcon" />设备阈值：
                                    </span>
                                    <a-space>
                                        <template #split>
                                            <a-divider type="vertical" />
                                        </template>
                                        <a-typography-link
                                            @click="() => { infoFormRef.open = true; DeviceStore.getThreshold(item.serial) }">查看</a-typography-link>
                                        <a-typography-link
                                            @click="() => { ThresholdFormRef.open = true; DeviceStore.getThreshold(item.serial) }">修改</a-typography-link>
                                    </a-space>
                                </li>
                            </ul>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </a-spin>

        <a-empty v-else />
    </Scroll>

    <!-- 添加 -->
    <ModalForm ref="addFormRef" type="add" :okFn="DeviceStore.addDevice" :FormValue="DeviceStore.addForm"
        :FormConfig="addForm" :rules="addRules" />

    <!-- 修改 -->
    <ModalForm ref="editFormRef" type="edit" :okFn="DeviceStore.editDevice" :FormValue="DeviceStore.editForm"
        :FormConfig="editForm" :rules="editRules" />

    <ModalForm ref="infoFormRef" type="info" title="阈值详情" :footer="null" :FormValue="DeviceStore.thresholdInfo"
        :FormConfig="infoFormConfig" />

    <ModalForm ref="ThresholdFormRef" type="info" title="修改阈值" :okFn="DeviceStore.updateThreshold"
        :FormValue="DeviceStore.thresholdInfo" :FormConfig="ThresholdFormConfig" :rules="ThresholdRules" />

    <!-- 视频预览 -->
    <a-modal v-model:open="videoModal" title="预览视频" destroyOnClose width="850px" okText="切换视频"
        @ok="() => { videoModal = false; uploadRef.open = true }">
        <p>视频名称：{{ DeviceStore.editForm.videoName == undefined ? 'default.mp4' : DeviceStore.editForm.videoName }}</p>
        <video :src="DeviceStore.editForm.videoUrl == null ? '/default.mp4' : DeviceStore.editForm.videoUrl" width="800"
            height="450" controls autoplay metud="true" loop />
    </a-modal>

    <!-- 单个切换 -->
    <Upload ref="uploadRef" url="/changeVideo" :serial="DeviceStore.editForm.serial" showModal
        :fn="() => { videoModal = false; DeviceStore.getDevice() }" />
    <!-- 批量切换 -->
    <ModalForm ref="videoFormRef" title="切换视频" width="50%" :FormValue="DeviceStore.videoForm"
        :FormConfig="VideoFormConfig" :rules="VideoRules" :okFn="DeviceStore.setVideo" />
    <!-- 下发版本 -->
    <ModalForm ref="versionFormRef" width="40%" title="批量升级" :FormValue="DeviceStore.versionForm"
        :FormConfig="VersionFormConfig" :rules="VersionRules" :okFn="DeviceStore.ctrlVersion" />
    <!-- 上传模板注册 -->
    <Upload ref="uploadTemplateRef" url="/uploadDevice" showTemplate :selectedFn="(file: File) => {
        DeviceStore.modelForm.multipartFile = [file]
    }" :fn="() => { DeviceStore.uploadModel() }" />
</template>
<script lang='ts' setup>
import { BarcodeOutlined, EditOutlined, DeleteOutlined, FundOutlined, TagsOutlined, EnvironmentOutlined, UserOutlined, MobileOutlined, SearchOutlined, NumberOutlined, PlusOutlined, VerticalAlignBottomOutlined, VideoCameraOutlined, BranchesOutlined } from '@ant-design/icons-vue'
import { onUnmounted, provide, ref, watch, } from 'vue';
import { useDevice } from '@/stores/Device'
import { searchConfig, addConfig, editConfig, infoConfig, ThresholdConfig, searchSelfConfig, VideoConfig, VersionConfig } from '@/config/Device'
import { createForm } from '@/utils/CreateForm'
import { createBtns } from '@/utils/createPermissionBtns'

import { debounce } from 'lodash'
import EventBus from '@/utils/EventBus';
import { useCommon } from '@/stores/Common';
import { useTableScroll } from '@/utils/GetTableScroll';
const CommonStore = useCommon()

const scroll = useTableScroll('searchCard')

const { FormConfig } = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { labelAlign: 'left', layout: 'inline', labelCol: { span: 5 } },)
const { FormConfig: addForm, FormRules: addRules } = new createForm(addConfig)
const { FormConfig: editForm, FormRules: editRules } = new createForm(editConfig)
const { FormConfig: infoFormConfig } = new createForm(infoConfig, { labelAlign: 'left', labelCol: { span: 12 }, layout: 'vertical' })
const { FormConfig: ThresholdFormConfig, FormRules: ThresholdRules } = new createForm(ThresholdConfig, { labelAlign: 'left', labelCol: { span: 12 }, layout: 'vertical' })
const { FormConfig: VideoFormConfig, FormRules: VideoRules } = new createForm(VideoConfig)
const { FormConfig: VersionFormConfig, FormRules: VersionRules } = new createForm(VersionConfig)


const addFormRef = ref()
const editFormRef = ref()
const infoFormRef = ref()
const ThresholdFormRef = ref()
const uploadRef = ref()
const videoFormRef = ref()
const versionFormRef = ref()
const uploadTemplateRef = ref()


const videoModal = defineModel('videoModal', { type: Boolean, default: false })
const openVersionModal = defineModel('openVersionModal', { type: Boolean, default: false })

const DeviceStore = useDevice()
DeviceStore.getDevice()

setInterval(() => {
    DeviceStore.searchForm.pageNo = 1
    DeviceStore.searchForm.pageSize = DeviceStore.searchForm.total
    DeviceStore.getDevice()
}, 180000)

function ObserverLoadMore() {
    if (!DeviceStore.isOver) {
        DeviceStore.showMore = true
    }
}

watch(() => DeviceStore.showMore, (val) => {
    console.log(val);

    if (val) {
        DeviceStore.loadMoreData()
    }
})

const editFn = (item: any) => {
    DeviceStore.editForm = { ...item }
    editFormRef.value.open = true
}

provide('permissionBtns', createBtns({
    query: debounce(() => {
        DeviceStore.searchForm.pageNo = 1;
        DeviceStore.isOver = false
        DeviceStore.showMore = true
        DeviceStore.getDevice()
    }, 1000),
    add: () => addFormRef.value.open = true,
    exportAll: debounce(() => DeviceStore.exportAllData(), 1000),
    setVideo: () => videoFormRef.value.open = true,
    setVersion: () => versionFormRef.value.open = true,
    downloadModel: () => DeviceStore.downloadModel(),
    uploadModel: () => uploadTemplateRef.value.open = true,
}))


onUnmounted(() => {
    DeviceStore.$reset()
})


</script>
<style lang='scss' scoped>
@import url('@/assets/scss/PC/Device.scss');
@import url('@/assets/scss/Mobile/Device.scss');
</style>